import React, { Component } from "react";
import { get } from "../../utils/Axios";
import { Toast } from "antd-mobile";
import PrivateCarousel from "./compoments/PrivateCarousel";
import PrivateMsgShow from "./compoments/PrivateMsgShow";
import PrivateMap from "./compoments/PrivateMap";
import PrivateFooter from "./compoments/PrivateFooter";
import PrivateHousingSupporting from "./compoments/PrivateHousingSupporting";
import PrivateHousingHighlights from "./compoments/PrivateHousingHighlights";
import "./index.scss";

class HouseDetail extends Component {
  state = {
    detailMsg: {},
  };

  getDetailMsg = () => {
    const { params } = this.props.match;
    const { id } = params;

    get("/houses/" + id).then((result) => {
      Toast.hide();
      this.setState((state, props) => ({
        detailMsg: result.data.body,
      }));
    });
  };
  componentDidMount() {
    Toast.loading("正在装载...", 9999999);
    this.getDetailMsg();
  }
  render() {
    const { detailMsg } = this.state;

    return (
      <div className="detailWrapper">
        <PrivateCarousel
          houseImg={detailMsg.houseImg}
          partName={detailMsg.community}
          goBack={() => {
            this.props.history.goBack();
          }}
        ></PrivateCarousel>
        <PrivateMsgShow
          houseTitle={detailMsg.title}
          houseTags={detailMsg.tags}
          housePrice={detailMsg.price}
          houseRoomType={detailMsg.roomType}
          houseSize={detailMsg.size}
          houseOriente={detailMsg.oriented}
          houseFloor={detailMsg.floor}
        ></PrivateMsgShow>
        <PrivateMap
          houseCoord={detailMsg.coord}
          partName={detailMsg.community}
        ></PrivateMap>

        <PrivateHousingSupporting
          houseSupporting={detailMsg.supporting}
        ></PrivateHousingSupporting>

        <PrivateFooter houseHashCode={detailMsg.houseCode}></PrivateFooter>
        <PrivateHousingHighlights
          houseDescription={detailMsg.description}
        ></PrivateHousingHighlights>
        <div style={{ width: "100px", height: "70px" }}></div>
      </div>
    );
  }
}

export default HouseDetail;
